{% extends "base.html" %}

{% block title %}Profile - Volunteer Platform{% endblock %}

{% block content %}
<div style="background-color: #f5f7fa; min-height: 100vh; padding: 2rem 0;">
    <div style="max-width: 800px; margin: 0 auto; padding: 0 2rem;">
        <div style="background: linear-gradient(135deg, #4CAF50 0%, #2196F3 100%); color: white; padding: 3rem 2rem; border-radius: 15px; margin-bottom: 2rem; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden;">
            <h1 style="margin: 0; font-size: 2.5rem; font-weight: 700; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);">Personal Profile</h1>
            <p style="font-size: 1.1rem; margin-top: 1rem; opacity: 0.9;">Complete your personal information for a better volunteering experience</p>
        </div>

        <!-- Basic Information Section -->
        <div style="background: white; border-radius: 15px; padding: 2rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s ease;">
            <h2 style="color: #2c3e50; font-size: 1.75rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid #ecf0f1; position: relative;">Basic Information</h2>
            <form method="POST" action="{{ url_for('volunteer_profile_update') }}">
                <div style="margin-bottom: 1.5rem;">
                    <label for="name" style="display: block; margin-bottom: 0.75rem; color: #34495e; font-weight: 600; font-size: 0.95rem;">Name</label>
                    <input type="text" id="name" name="name" value="{{ user.name }}" required 
                           style="width: 100%; padding: 0.75rem 1rem; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; transition: all 0.3s ease;">
                </div>
                
                <div style="margin-bottom: 1.5rem;">
                    <label for="email" style="display: block; margin-bottom: 0.75rem; color: #34495e; font-weight: 600; font-size: 0.95rem;">Email</label>
                    <input type="email" id="email" name="email" value="{{ user.email }}" readonly 
                           style="width: 100%; padding: 0.75rem 1rem; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; background-color: #f8f9fa; opacity: 0.7;">
                    <small style="display: block; margin-top: 0.5rem; color: #7f8c8d; font-size: 0.85rem;">Email address cannot be modified</small>
                </div>
                
                <div style="margin-bottom: 1.5rem;">
                    <label for="phone" style="display: block; margin-bottom: 0.75rem; color: #34495e; font-weight: 600; font-size: 0.95rem;">Phone</label>
                    <input type="tel" id="phone" name="phone" value="{{ user.phone or '' }}" placeholder="Enter your phone number"
                           style="width: 100%; padding: 0.75rem 1rem; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; transition: all 0.3s ease;">
                </div>
                
                <div style="margin-bottom: 1.5rem;">
                    <label for="birth_date" style="display: block; margin-bottom: 0.75rem; color: #34495e; font-weight: 600; font-size: 0.95rem;">Date of Birth</label>
                    <input type="date" id="birth_date" name="birth_date" value="{{ user.birth_date or '' }}"
                           style="width: 100%; padding: 0.75rem 1rem; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; transition: all 0.3s ease;">
                </div>
                
                <div style="margin-bottom: 1.5rem;">
                    <label for="gender" style="display: block; margin-bottom: 0.75rem; color: #34495e; font-weight: 600; font-size: 0.95rem;">Gender</label>
                    <select id="gender" name="gender" style="width: 100%; padding: 0.75rem 1rem; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; transition: all 0.3s ease;">
                        <option value="">Please select</option>
                        <option value="male" {% if user.gender == 'male' %}selected{% endif %}>Male</option>
                        <option value="female" {% if user.gender == 'female' %}selected{% endif %}>Female</option>
                        <option value="other" {% if user.gender == 'other' %}selected{% endif %}>Other</option>
                    </select>
                </div>
                
                <div style="margin-bottom: 1.5rem;">
                    <label for="address" style="display: block; margin-bottom: 0.75rem; color: #34495e; font-weight: 600; font-size: 0.95rem;">Address</label>
                    <input type="text" id="address" name="address" value="{{ user.address or '' }}" placeholder="Enter your address"
                           style="width: 100%; padding: 0.75rem 1rem; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; transition: all 0.3s ease;">
                </div>
                
                <div style="margin-bottom: 1.5rem;">
                    <label for="skills" style="display: block; margin-bottom: 0.75rem; color: #34495e; font-weight: 600; font-size: 0.95rem;">Skills</label>
                    <textarea id="skills" name="skills" rows="3" placeholder="e.g., First Aid, Foreign Languages, Photography"
                              style="width: 100%; padding: 0.75rem 1rem; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; transition: all 0.3s ease;">{{ user.skills or '' }}</textarea>
                    <small style="display: block; margin-top: 0.5rem; color: #7f8c8d; font-size: 0.85rem;">Please list your skills, separated by commas</small>
                </div>
                
                <div style="margin-bottom: 1.5rem;">
                    <label for="introduction" style="display: block; margin-bottom: 0.75rem; color: #34495e; font-weight: 600; font-size: 0.95rem;">Introduction</label>
                    <textarea id="introduction" name="introduction" rows="5" placeholder="Please introduce yourself briefly"
                              style="width: 100%; padding: 0.75rem 1rem; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; transition: all 0.3s ease;">{{ user.introduction or '' }}</textarea>
                </div>
                
                <div style="margin-top: 2.5rem;">
                    <button type="submit" style="padding: 0.875rem 2rem; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); color: white; text-transform: uppercase; letter-spacing: 0.5px; min-width: 160px; transition: all 0.3s ease;">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %} 